/*
 * @Descripttion: your project
 * @Author: Liujiaqing
 * @Date: 2022-02-10 14:43
 * @LastEditors: Liujiaqing
 * @LastEditTime: 2022-02-10 14:43
 */
import { Button, Form, Input, Select } from 'antd';
import React from 'react';
import '../style.less';
import RightRegisterSuccess from './right-register-success';
interface IRightResetProps {
    step: number;
    onChangeStep: (num?: number) => void;
    onChangeStatus: (status: string) => void;
}
const RightReset = (props: IRightResetProps) => {
    const { step = 1, onChangeStep, onChangeStatus } = props;
    const [mobileNum, setMobileNum] = React.useState('+86');
    const [form] = Form.useForm();
    const [formPassword] = Form.useForm();
    React.useEffect(() => {
        console.log(form);
        form.setFieldsValue({
            mobile: '',
            code: '',
        });
    }, []);
    const onChangeMobileNum = React.useCallback((value: string) => {
        setMobileNum(value);
    }, []);

    const onClickSubmit = React.useCallback(() => {
        form.submit();
    }, []);
    const onFinish = React.useCallback(() => {
        const loginForm: any = { ...form.getFieldValue([]) };
        loginForm.mobile = mobileNum + loginForm.mobile;
    }, [form, mobileNum]);
    const onFinishPassword = React.useCallback(() => {
        // const loginForm: any = { ...formPassword.getFieldValue([]) };
    }, [formPassword, mobileNum]);
    const selectBefore = React.useMemo(() => {
        return (
            <Select value={mobileNum} className="select-before" onChange={onChangeMobileNum}>
                <Select.Option value="+86">+86</Select.Option>
                <Select.Option value="+87">+87</Select.Option>
            </Select>
        );
    }, [mobileNum]);
    const onClickNext = React.useCallback(
        (num: number) => {
            onChangeStep(num);
        },
        [onChangeStep],
    );
    const returnHtml = React.useMemo(() => {
        console.log(step);
        if (step === 1) {
            return (
                <div className="right-content-container">
                    <div className="content-title">账号验证</div>
                    <Form form={form} wrapperCol={{ span: 14, offset: 0 }} layout={'vertical'} onFinish={onFinish} style={{ marginTop: '24px' }}>
                        <Form.Item
                            label="手机号："
                            name="mobile"
                            rules={[
                                { required: true, message: '手机号不能为空' },
                                {
                                    pattern: /^1[3|4|5|7|8｜9][0-9]\d{8}$/,
                                    message: '请输入正确的手机号',
                                },
                            ]}
                        >
                            <Input addonBefore={selectBefore} placeholder="11位手机号" />
                        </Form.Item>
                        <div className="content-flex" style={{ width: '58.3%' }}>
                            <Form.Item
                                label="手机验证码："
                                name="password"
                                style={{ width: '100%' }}
                                rules={[
                                    {
                                        required: true,
                                        message: '密码不能为空',
                                    },
                                ]}
                                wrapperCol={{ span: 22, offset: 0 }}
                            >
                                <Input placeholder="输入验证码" style={{ width: 'calc(100 % -124px)' }} />
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" size="middle" className="content-btn code " onClick={onClickSubmit}>
                                    发送验证码
                                </Button>
                            </Form.Item>
                        </div>
                        <Form.Item>
                            <div className="content-flex">
                                <Button block size="middle" className="content-btn block" onClick={onChangeStatus.bind(null, 'logined')}>
                                    上一步
                                </Button>
                                <Button type="primary" size="middle" className="content-btn" onClick={onClickNext.bind(null, 2)}>
                                    下一步
                                </Button>
                            </div>
                        </Form.Item>
                    </Form>
                </div>
            );
        } else if (step === 2) {
            return (
                <div className="right-content-container">
                    <div className="content-title">重置密码</div>
                    <Form form={formPassword} wrapperCol={{ span: 14, offset: 0 }} layout={'vertical'} onFinish={onFinishPassword} style={{ marginTop: '24px' }}>
                        <Form.Item
                            label="新密码："
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '密码不能为空',
                                },
                            ]}
                        >
                            <Input.Password placeholder="6-16位密码，区分大小写" />
                        </Form.Item>
                        <Form.Item
                            label="确定新密码："
                            name="passwordTwo"
                            rules={[
                                {
                                    required: true,
                                    message: '密码不能为空',
                                },
                            ]}
                        >
                            <Input.Password placeholder="6-16位密码，区分大小写" />
                        </Form.Item>
                        <Form.Item>
                            <div className="content-flex">
                                <Button block size="middle" className="content-btn block" onClick={onClickNext.bind(null, 1)}>
                                    上一步
                                </Button>
                                <Button type="primary" htmlType="submit" size="middle" className="content-btn" onClick={onClickNext.bind(null, 3)}>
                                    重置
                                </Button>
                            </div>
                        </Form.Item>
                    </Form>
                </div>
            );
        } else {
            return <RightRegisterSuccess title={'重置成功'} onChangeStep={onClickNext.bind(null, 1)} onChangeStatus={onChangeStatus}></RightRegisterSuccess>;
        }
    }, [step]);
    return <>{returnHtml}</>;
};
export default RightReset;
